<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        .button{
            /* 外表 表单元素 button radio 重新设置 除去初始化 不受浏览器默认行为影响 */
            margin: 100px;
            appearance: none;
            position: relative;
            background: #f72359;
            padding: 1em 2em;
            border: none;
            color: white;
            font-size: 1.2em;
            display: inline-block;
            cursor: pointer;
            outline: none; /* 轮廓 border 是盒模型的一部分 outline不是 
            IE dom1 dom2
            标准盒模型  width/height 内容宽高
            ie 盒模型   全部
            */
            border-radius: 100px;
            overflow: hidden;
        }
        .button::before{
            /* 不适用js 去动态修改 before 的位置
            面试官css4
            --x 
            js 设置 x的值
            */
            --size:0; /* css next */
            content: '';
            position: absolute;
            left: var(--x);
            right: var(--y);
            width: var(--size);
            height: var(--size);
            background: radial-gradient(circle closest-side, #4405f7, transparent);
            transform: translate(-50%,-50%);;
            transition: width 0.2s ease,height 0.2s ease;
        }
        .button:hover::before{
            --size:400px;
        }
    </style>
</head>
<body>
    <div class="button">hover me i am awisome</div>
    <script>
        document.querySelector('.button')
        .onmousemove = (e)=>{
            // pageX 相对于页面的偏移
            const x = e.pageX-e.target.offsetLeft;
            const y = e.pageY-e.target.offsetTop;
            // css样式变量
            e.target.style.setProperty('--x',`${x}px`);
            e.target.style.setProperty('--y',`${y}px`);
        }
    </script>
</body>     
</html>